μž‘μ„±: 2024-11-27 06:30:34
    μˆ˜μ •: 2024-11-27 06:30:34

    μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§ (SSR [Server Side Rendering])

    μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§ (SSR, Server-Side Rendering)은 μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ μ½˜ν…μΈ κ°€ μ„œλ²„μ—μ„œ λ Œλ”λ§λœ ν›„, μ™„μ „ν•œ HTML νŽ˜μ΄μ§€κ°€ ν΄λΌμ΄μ–ΈνŠΈμ— μ „μ†‘λ˜λŠ” λ°©μ‹μž…λ‹ˆλ‹€. 이 접근법은 μ‚¬μš©μžκ°€ μ›Ή νŽ˜μ΄μ§€μ— μ ‘κ·Όν•  λ•Œλ§ˆλ‹€ μ„œλ²„κ°€ ν•΄λ‹Ή νŽ˜μ΄μ§€λ₯Ό μ²˜λ¦¬ν•˜κ³  μƒμ„±ν•˜λŠ” 과정을 ν¬ν•¨ν•©λ‹ˆλ‹€.

    μ£Όμš” κ°œλ…

    1. 초기 μš”μ²­: μ‚¬μš©μžκ°€ URL에 μ ‘κ·Όν•˜λ©΄, ν΄λΌμ΄μ–ΈνŠΈλŠ” μ„œλ²„μ— μš”μ²­μ„ λ³΄λƒ…λ‹ˆλ‹€. μ„œλ²„λŠ” μš”μ²­λœ νŽ˜μ΄μ§€μ˜ μ½˜ν…μΈ λ₯Ό λ™μ μœΌλ‘œ μƒμ„±ν•˜μ—¬ HTML둜 λ³€ν™˜ν•œ ν›„, 이λ₯Ό ν΄λΌμ΄μ–ΈνŠΈμ— μ „μ†‘ν•©λ‹ˆλ‹€.

    2. λ Œλ”λ§: ν΄λΌμ΄μ–ΈνŠΈλŠ” μ„œλ²„λ‘œλΆ€ν„° 받은 HTML을 μ¦‰μ‹œ ν‘œμ‹œν•  수 μžˆμŠ΅λ‹ˆλ‹€. 이후에 ν•„μš”ν•œ JavaScript 파일이 λ‹€μš΄λ‘œλ“œλ˜κ³  μ‹€ν–‰λ˜λ©°, νŽ˜μ΄μ§€μ˜ μƒν˜Έμž‘μš©μ„ μœ„ν•œ ν΄λΌμ΄μ–ΈνŠΈ μΈ‘ 둜직이 ν™œμ„±ν™”λ©λ‹ˆλ‹€.

    3. νŽ˜μ΄μ§€ μ „ν™˜: 이후 νŽ˜μ΄μ§€ μ „ν™˜μ΄ ν•„μš”ν•  λ•Œ, ν΄λΌμ΄μ–ΈνŠΈλŠ” AJAX μš”μ²­μ„ 톡해 ν•„μš”ν•œ 데이터λ₯Ό μ„œλ²„μ—μ„œ κ°€μ Έμ˜€κ³ , 이λ₯Ό λ°”νƒ•μœΌλ‘œ νŽ˜μ΄μ§€λ₯Ό μ—…λ°μ΄νŠΈν•  수 μžˆμŠ΅λ‹ˆλ‹€.

    μž₯점

    1. λΉ λ₯Έ 초기 λ‘œλ“œ: μ„œλ²„μ—μ„œ μƒμ„±λœ HTML을 ν΄λΌμ΄μ–ΈνŠΈκ°€ μ¦‰μ‹œ λ Œλ”λ§ν•  수 있기 λ•Œλ¬Έμ—, μ‚¬μš©μžμ—κ²Œ λΉ λ₯Έ 초기 λ‘œλ“œ κ²½ν—˜μ„ μ œκ³΅ν•©λ‹ˆλ‹€.

    2. SEO μ΅œμ ν™”: 검색 엔진이 νŽ˜μ΄μ§€μ˜ HTML μ½˜ν…μΈ λ₯Ό μ‰½κ²Œ 크둀링할 수 μžˆμ–΄ SEO에 μœ λ¦¬ν•©λ‹ˆλ‹€. μ½˜ν…μΈ κ°€ μ„œλ²„μ—μ„œ λ Œλ”λ§λ˜κΈ° λ•Œλ¬Έμ—, 검색 μ—”μ§„μ˜ 색인 생성에 도움이 λ©λ‹ˆλ‹€.

    3. μ‚¬νšŒμ  곡유: SSR은 μ†Œμ…œ λ―Έλ””μ–΄ ν”Œλž«νΌμ—μ„œ 링크λ₯Ό κ³΅μœ ν•  λ•Œ 미리보기 이미지λ₯Ό ν¬ν•¨ν•œ 메타 νƒœκ·Έλ₯Ό μ‰½κ²Œ μ„€μ •ν•  수 μžˆμ–΄, 곡유 μ‹œ 더 λ‚˜μ€ μ‚¬μš©μž κ²½ν—˜μ„ μ œκ³΅ν•©λ‹ˆλ‹€.

    단점

    1. μ„œλ²„ λΆ€ν•˜ 증가: λͺ¨λ“  νŽ˜μ΄μ§€ μš”μ²­μ— λŒ€ν•΄ μ„œλ²„κ°€ λ Œλ”λ§μ„ μˆ˜ν–‰ν•΄μ•Ό ν•˜λ―€λ‘œ, μ„œλ²„μ˜ λΆ€ν•˜κ°€ 증가할 수 μžˆμŠ΅λ‹ˆλ‹€. νŠΈλž˜ν”½μ΄ λ§Žμ€ μ‚¬μ΄νŠΈμ—μ„œλŠ” μ„±λŠ₯ μ €ν•˜κ°€ λ°œμƒν•  수 μžˆμŠ΅λ‹ˆλ‹€.

    2. λ„€νŠΈμ›Œν¬ 지연: ν΄λΌμ΄μ–ΈνŠΈλŠ” 맀번 μ„œλ²„μ™€ 톡신해야 ν•˜λ―€λ‘œ, λ„€νŠΈμ›Œν¬ 지연이 λ°œμƒν•  수 μžˆμŠ΅λ‹ˆλ‹€. 특히 느린 λ„€νŠΈμ›Œν¬ ν™˜κ²½μ—μ„œλŠ” μ‚¬μš©μž κ²½ν—˜μ΄ μ €ν•˜λ  수 μžˆμŠ΅λ‹ˆλ‹€.

    3. μƒνƒœ 관리: ν΄λΌμ΄μ–ΈνŠΈμ™€ μ„œλ²„ κ°„μ˜ μƒνƒœ 관리λ₯Ό 효율적으둜 μˆ˜ν–‰ν•˜λŠ” 것이 λ³΅μž‘ν•  수 μžˆμŠ΅λ‹ˆλ‹€. ν΄λΌμ΄μ–ΈνŠΈ μƒνƒœμ™€ μ„œλ²„ μƒνƒœ κ°„μ˜ 동기화가 ν•„μš”ν•©λ‹ˆλ‹€.

    μ‚¬μš© 사둀

    • μ½˜ν…μΈ  μ€‘μ‹¬μ˜ μ›Ήμ‚¬μ΄νŠΈ: λΈ”λ‘œκ·Έ, λ‰΄μŠ€ μ‚¬μ΄νŠΈ, μ „μžμƒκ±°λž˜ μ›Ήμ‚¬μ΄νŠΈ λ“±μ—μ„œ μ‚¬μš©λ©λ‹ˆλ‹€. μ΄λŸ¬ν•œ μ‚¬μ΄νŠΈλ“€μ€ SEO와 초기 λ‘œλ“œ μ„±λŠ₯이 μ€‘μš”ν•©λ‹ˆλ‹€.
    • λŒ€μ‹œλ³΄λ“œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜: μ„œλ²„μ—μ„œ 데이터λ₯Ό λ™μ μœΌλ‘œ λ Œλ”λ§ν•΄μ•Ό ν•˜λŠ” λŒ€μ‹œλ³΄λ“œμ—μ„œ SSR이 효과적일 수 μžˆμŠ΅λ‹ˆλ‹€.
    • μ‚¬νšŒμ  λ―Έλ””μ–΄ 곡유: 링크가 μ†Œμ…œ 미디어에 곡유될 λ•Œ 미리보기 정보λ₯Ό μ •ν™•ν•˜κ²Œ μ œκ³΅ν•˜κΈ° μœ„ν•΄ SSR을 μ‚¬μš©ν•©λ‹ˆλ‹€.

    κ²°λ‘ 

    μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§μ€ 초기 λ‘œλ“œ 속도와 SEO에 μœ λ¦¬ν•œ μ ‘κ·Όλ²•μœΌλ‘œ, μ½˜ν…μΈ  μ€‘μ‹¬μ˜ μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ— μ ν•©ν•©λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ μ„œλ²„μ˜ λΆ€ν•˜μ™€ λ„€νŠΈμ›Œν¬ 지연 문제λ₯Ό κ³ λ €ν•΄μ•Ό ν•˜λ©°, μ‚¬μš©μžμ˜ μš”κ΅¬ 사항에 맞게 CSR, SSG와 ν•¨κ»˜ 적절히 μ„ νƒν•˜μ—¬ μ‚¬μš©ν•˜λŠ” 것이 μ€‘μš”ν•©λ‹ˆλ‹€.